<template>
    <tm-overlay bgColor="rgba(0,0,0,0.6)" v-model:show="visible" contentAnimation>
        <view @click.stop="">
            <view class="modal-content">
                <image @click="visible = false" class="close-image" :src="modal_close_image" mode="widthFix"></image>
                <view class="content">
                    <tm-text class="mb-20" :font-size="36" color="#825C20" label="请选择您当年的运势"></tm-text>
                    <view @click="handleSelect(item)" :key="i" v-for="(item, i) in fortuneTypeList"
                        :class="{ actived: actived(item) }" class="select-card">
                        <tm-text :font-size="28" color="#825C20" :label="item.dictLabel"></tm-text>
                        <tm-text :font-size="28" color="#A37C3D" :label="item.dictValue"></tm-text>
                    </view>
                </view>
            </view>
        </view>
    </tm-overlay>
</template>
<script setup lang="ts">
    import { defineProps, ref, watch, computed } from 'vue'
    import modal_close_image from '/static/assets/images/common/modal-close.png'
    import { useYearlyFortuneStore } from '@/stores/yearlyFortune'

    const yearlyFortuneStore = useYearlyFortuneStore()

    const fortuneTypeList = computed(() => {
        return yearlyFortuneStore.fortuneTypeList
    })

    const props = defineProps({
        show: {
            type: Boolean,
            default: false
        },
        yearlyFortune: {
            type: Object,
            default: () => ({})
        },
    })

    const emit = defineEmits(['update:show', 'change'])

    const visible = ref(props.show)
    const currentCode = ref(props.yearlyFortune?.dictCode || null)
    const actived = computed(() => {
        return (item) => currentCode.value === item.dictCode
    })

    const handleSelect = async (item) => {
        currentCode.value = item.dictCode
        await yearlyFortuneStore.save({
            type: props.yearlyFortune?.dictCode ? 'update' : 'add',
            date: props.yearlyFortune?.date || '',
            dictCode: currentCode.value,
        })
        emit('change')
        visible.value = false
    }

    watch(() => props.show, (newVal) => {
        if (newVal) {
            currentCode.value = props.yearlyFortune?.dictCode || null
        }
        else {
            currentCode.value = ''
        }
        visible.value = newVal
    })

    watch(() => visible.value, (newVal) => {
        emit('update:show', newVal)
    })
</script>
<style lang="less" scoped>
    .modal-content {
        width: 580rpx;
        position: relative;
        z-index: 0;
        border: 8rpx solid #C2B69E;
        border-radius: 8rpx;

        .close-image {
            position: absolute;
            width: 80rpx;
            height: 80rpx;
            right: -40rpx;
            top: -40rpx;
        }

        .content {
            padding-top: 40rpx;
            padding-bottom: 66rpx;
            background-color: #fff;
            border-radius: 8rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .select-card {
                width: 488rpx;
                border-radius: 8rpx;
                border: 1px solid #BF9A60;
                margin-top: 20rpx;
                padding: 16rpx 30rpx;

                &.actived {
                    background-color: rgba(163, 124, 61, 0.20);
                    position: relative;

                    &::after {
                        font-family: tmicon;
                        position: absolute;
                        content: "\e82b";
                        display: block;
                        width: 20rpx;
                        right: 40rpx;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #A37C3D;
                    }
                }
            }
        }
    }
</style>